import React from 'react';
import clsx from 'clsx';
import { CellGroupProps } from './PropsType';
import { BORDER_TOP_BOTTOM } from '../utils/constant';
import useNamespace from '../utils/useNamespace';

const CellGroup: React.FC<CellGroupProps> = ({
  title,
  border = true,
  inset: insetProp,
  card,
  children,
  className,
  style,
}) => {
  const inset = card || insetProp;
  const [bem] = useNamespace('cell-group');

  const renderGroup = () => (
    <div className={clsx(bem({ inset }), { [BORDER_TOP_BOTTOM]: !inset && border })}>
      {children}
    </div>
  );

  const renderTitle = () => {
    if (title) return <div className={clsx(bem('title'))}>{title}</div>;
    return null;
  };

  return (
    <div className={className} style={style}>
      {renderTitle()}
      {renderGroup()}
    </div>
  );
};

export default CellGroup;
